function Snake(el){
    this.el =el
    this.len = 20
    this.snakeobj = [
        { x: 3, y :2, color:'yellowgreen', el:null}, 
        { x: 2, y :2, color:'blue', el:null}, 
        { x: 1, y :2, color:'blue', el:null} ]
        this.direction = 'right' 
    
}
Snake.prototype.remove = function(){
    for(let i =0; i<this.snakeobj.length; i++){
        if(this.snakeobj[i].el){
        this.el.removeChild(this.snakeobj[i].el)
        }
    }
}

Snake.prototype.create = function(){
    this.remove()
    for(let i =0; i<this.snakeobj.length; i++){
        let divobj = document.createElement('div')
        divobj.style.width = this.len +'px'
        divobj.style.height = this.len +'px'
        divobj.style.position = 'absolute'
        divobj.style.left=this.snakeobj[i].x*this.len + 'px'
        divobj.style.top=this.snakeobj[i].y*this.len + 'px'
        divobj.style.background = this.snakeobj[i].color

        this.snakeobj[i].el = divobj
        this.el.appendChild(divobj)
    }
}


Snake.prototype.move = function(){
    for(let i = this.snakeobj.length-1;i>0;i--){
        this.snakeobj[i].x = this.snakeobj[i-1].x
        this.snakeobj[i].y = this.snakeobj[i-1].y
    }

    switch (this.direction) {
        case 'top':
            this.snakeobj[0].y--
            break;
        case 'bottom':
            this.snakeobj[0].y++
            break;
        case 'left':
            this.snakeobj[0].x--
            break;
        case 'right':
            this.snakeobj[0].x++
            break;
    }

    this.create()
}

